<template>
  <div>
    <el-card>
      <el-form inline :model="roleForm">
        <el-form-item>
          <el-input placeholder="角色名称" v-model="urole" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="Search">查询</el-button>
        <el-button type="default" @click="cls">清空</el-button>
      </el-form>

      <div style="margin: 20px 0">
        <el-button type="primary" @click="addShow">添 加</el-button>
        <el-button type="danger" :disabled="sels.length === 0" @click="batchDelect">批量删除</el-button>
      </div>

      <el-table border stripe :data="roleInfo" @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="55" />

        <el-table-column type="index" label="序号" width="80" align="center" />

        <el-table-column prop="roleName" label="角色名称" />

        <el-table-column label="操作" width="300" align="center" fixed="right">
          <template v-slot="{ row }">
            <el-button type="info" size="mini" icon="el-icon-info" title="分配权限" @click="" />
            <el-button type="success" size="mini" icon="el-icon-check" title="确定" @click="" />
            <el-button type="primary" size="mini" icon="el-icon-edit" title="修改角色" @click="updateShow(row)" />
            <el-popconfirm :title="`确定删除 ${row.roleName} 吗?`" @onConfirm="deleteRole(row)">
              <template #reference>
                <span>
                  <el-button style="margin-left:10px" type="danger" size="mini" icon="el-icon-delete-solid"
                    title="删除角色" />
                </span>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page=page :page-size=limit :total=total :page-sizes="[5, 10, 20]" style="padding: 20px 0;"
        layout="prev, pager, next, jumper, ->, sizes, total" @current-change="getRoleInfo" @size-change="changeSize" />

      <el-dialog title="添加用户" :visible.sync="dialogHidden">
        <el-form ref="roleFormRef" label-width="120px" :model="roleForm">
          <el-form-item label="请输入新名称" prop="username">
            <el-input v-model="roleForm.roleName" />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogHidden = false">取 消</el-button>
            <el-button type="primary" @click="AddorUpdateRole">确 定</el-button>
          </div>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Role',
  data() {
    return {
      name1: "",
      roleInfo: [],
      page: 1,
      limit: 5,
      total: 8,
      urole: '',
      sels: [], //当前选框选中的值
      Show: false,
      dialogHidden: false,
      roleForm: {
        roleName: '',
      },
    }
  },
  mounted() {
    console.log(this.$API);
    this.getRoleInfo()
  },
  methods: {
    //获取用户列表以及分页器点击事件，以及获取查询用户的内容
    async getRoleInfo(pages = 1) {
      this.page = pages
      const { page, limit, urole } = this
      const result = await this.$API.role.reqRoleList(page, limit, urole)
      console.log(result);
      //列表数据
      this.roleInfo = result.data.items
      this.total = result.data.total
    },

    //分页器改变事件
    changeSize(limit) {
      this.limit = limit
      this.getRoleInfo()
    },

    //是否显示添加对话框，并清除数据
    addShow() {
      this.dialogHidden = true
      this.roleForm = { roleName: '' }
    },

    //查询用户
    Search() {
      this.getRoleInfo()
    },

    //清空查询框
    cls() {
      this.urole = ''
      this.getRoleInfo()
    },

    //是否显示修改对话框
    updateShow(row) {
      this.dialogHidden = true
      //row就是当前这一列的信息
      this.roleForm = { ...row }
    },

    //添加和修改按钮点击事件
    AddorUpdateRole() {
      this.$refs.roleFormRef.validate(async (pass) => {
        //会返回一个布尔值,没通过表单验证则返回false,通过了返回true
        console.log(pass);
        if (pass) {
          this.dialogHidden = false
          console.log(this.roleForm, "555555");

          //发送请求
          const result = await this.$API.role.reqAddorUpdateRole(this.roleForm)

          //如果成功
          if (result.code === 20000) {
            this.getRoleInfo()
            //三元表达式判断是否有id，有则是修改，无则是添加
            // Message.success("成功")
            this.$message({
              type: 'success',
              message: this.roleForm.id ? '修改成功' : '添加成功'
            });
          }
        }
        else {
          return false
        }
      })

    },

    //点击删除按钮
    async deleteRole(row) {
      //敏感操作弹框
      this.$confirm('是否要删除该用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //点击确定后发送请求
        const result = await this.$API.role.reqDeleteRole(row.id)
        if (result.code === 20000) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getRoleInfo(this.page)
        }
      }).catch(() => {
        //点击取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //获取选中的ID
    handleSelectionChange(sels) {
      this.sels = sels;
      console.log("选中的值", sels.map((item) => item.id));
    },

    //删除选中
    async batchDelect() {
      let ids = this.sels.map((item) => item.id);
      console.log(ids);
      // await this.$API.user.reqDeleteUsers(ids)
      // this.getRoleInfo()

      //敏感操作弹框
      this.$confirm('是否要删除这些用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //点击确定后发送请求
        const result = await this.$API.role.reqDeleteRoles(ids)
        if (result.code === 20000) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getRoleInfo(this.page)
        }
      }).catch(() => {
        //点击取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
}
</script>

<style></style>